<template>
  <div id="app">

      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 12px'}">请输入您的信息</van-divider>
      <van-form @submit="onSubmit">
        <van-cell-group>
          <van-field
            size="large"
            v-model="phone"
            placeholder="请输入收货电话"
            :rules="[{ required: true, pattern, message: '请输入正确收货电话' }]"
          />
          
          <van-field
            size="large"
            v-model="idCard"
            placeholder="请输入购卡者份证号"
            :rules="[{ required: true, validator, message: '请输入正确身份证号' }]"
          />
          
        </van-cell-group>
        <van-cell-group style="margin-top: 20px">
          <van-button type="primary" block v-bind:loading="loadStatus" loading-text="搜索中...">查询订单</van-button>
        </van-cell-group>
      </van-form>

      <!-- <searchOrderResult :dataParent="buyInfo"></searchOrderResult> -->
      <div v-show="orderStatus">
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 12px' }"
      >订单详情</van-divider
    >
    <van-cell-group v-for="orderInfo in buyInfo" :key="orderInfo.orderId" style="margin-bottom: 3px;">
      <van-cell title="订单号" v-model="orderInfo.orderId" />
      <van-cell
        title="订单名称："
        v-model="orderInfo.title"
      />
      <van-cell
        title="收件人姓名"
        v-model="orderInfo.name"
      />
      <van-cell
        title="收件地址"
        v-model="orderInfo.address"
        value=""
      />
      <van-cell title="订单状态" v-model="orderInfo.status" />
      <van-cell v-show="(orderInfo.courierNumber ? true : false )" title="物流单号" v-model="orderInfo.courierNumber"/>
    </van-cell-group>
  </div>
  <van-tabbar route placeholder safe-area-inset-bottom >
      <van-tabbar-item replace to="/home" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/searchOrder" icon="search">订单查询</van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
import { getOrderInfo } from '@/api/index.js';
export default {
  name: "searchOrder",

  data() {
    return {
      orderStatus: false,
      phone:'',
      idCard:'',
      buyInfo:[],
      loadStatus:false,//按钮旋转效果
      pattern:
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
    };
  },
  methods: {
    validator(val) {
      //身份证正则
      return /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
        val
      );
    },
    //点击查询按钮事件
    onSubmit() {
      if(this.orderStatus && this.buyInfo.length != 0 && this.buyInfo[0].idCard == this.idCard){
        return this.$toast("请不要重复查询");
      }
      this.loadStatus = true//按钮旋转效果
      this.buyInfo = []

      getOrderInfo(this.phone,this.idCard).then(res => {
        this.loadStatus = false //按钮旋转效果
        if(res.data.code != 200){
          this.orderStatus=false
          return this.$toast("不存在此订单");
        }
        this.buyInfo = res.data.data
        this.$toast("查询成功");
        this.orderStatus=true
      })
    },
    
  },
};
</script>

<style >
body {
  background-color: #efefef;
}
@media screen and (min-width: 700px) {
  #app {
    width: 500px;
    margin: 0 auto;
  }
}
</style>